import React, { useState } from "react";
import { NavBar, Form, Input, Button, NoticeBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { UserOutline, UnlockOutline } from "antd-mobile-icons";
import { Tabs } from "antd-mobile";
import "../css/LoginGet.css";
import { getAdd, getLogin } from "../api/index";
import { useEffect } from "react";

export default function LoginGet() {
  const navigate = useNavigate();
  // 登录 数据
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");
  // 注册 数据
  const [userName1, setUserName1] = useState("");
  const [password1, setPassword1] = useState("");
  // 验证 登录
  const [userName2, setUserName2] = useState("");

  const [active, setActive] = useState("fruits");
  const [data, setData] = useState([]);
  const [zcCode, setZcCode] = useState("");
  const [flag1, setFlag1] = useState(false);
  const [flag2, setFlag2] = useState(false);
  const [pdCode, setPdCode] = useState("");
  const [flag3, setFlag3] = useState(false);
  const [flag4, setFlag4] = useState(false);
  const [flag5, setFlag5] = useState(false);
  const [flag6, setFlag6] = useState(false);
  const [flag7, setFlag7] = useState(false);
  const [flag8, setFlag8] = useState(false);
  const [flag9, setFlag9] = useState(false);
  const [flag10, setFlag10] = useState(false);
  const [flag11, setFlag11] = useState(false);
  const [zcCode1, setZcCode1] = useState("");
  const [flag12, setFlag12] = useState(false);
  const [flag13, setFlag13] = useState(false);
  const [flag14, setFlag14] = useState(false);
  const [cod, setCod] = useState("");
  const back = () => {
    navigate(-1);
  };
  const login = (e) => {
    if (userName.length < 11) {
      setFlag7(true);
    } else {
      setFlag7(false);
    }
    if (password.length < 6) {
      setFlag9(true);
    } else {
      setFlag9(false);
    }
    if (userName.length >= 11 && password.length >= 6) {
      let a = data.filter((item) => item.userName == userName);
      console.log(a);
      if (a.length != 0) {
        if (a[0].password == password) {
          alert("登录成功");
          localStorage.setItem("user", JSON.stringify(a[0]));
          localStorage.setItem(
            "token",
            "231fa2sd311r5dgfs4g5sd44fd6sh5ga4ds54fd46a5sf4"
          );
          setFlag10(false);
          setFlag8(false);
          navigate("/my");
        } else {
          setFlag10(true);
        }
      } else {
        setFlag8(true);
      }
    }
  };
  //登录用户名
  const usernameFn = (e) => {
    setUserName(e);
    if (e.length >= 11) {
      setFlag7(false);
    }
  };
  //登录密码
  const passwordFn = (e) => {
    setPassword(e);
    if (e.length >= 6) {
      setFlag9(false);
    }
  };
  //注册用户名
  const zcusernameFn = (e) => {
    setUserName1(e);
    if (e.length >= 11) {
      setFlag3(false);
    }
  };
  //注册密码
  const zcpasswordFn = (e) => {
    setPassword1(e);
    if (e.length >= 6) {
      setFlag4(false);
    }
  };
  // 注册输入验证码
  const zcverificationcode = (e) => {
    setPdCode(e);
    if (e == zcCode) {
      setFlag2(false);
    }
  };
  // 注册
  const register = (e) => {
    if (userName1.length < 11) {
      setFlag3(true);
    } else {
      setFlag3(false);
    }
    if (pdCode == zcCode) {
      setFlag2(false);
    } else {
      setFlag2(true);
    }
    if (password1.length < 6) {
      setFlag4(true);
    } else {
      setFlag4(false);
    }
    if (zcCode.length != 0) {
      if (userName1.length >= 11 && pdCode == zcCode && password1.length >= 6) {
        let bbl = data.findIndex((item) => item.userName == userName1);
        if (bbl == -1) {
          getAdd({
            userName: userName1,
            password: password1,
            name: "游" + userName1,
            fans: JSON.stringify([]),
            attention: JSON.stringify([]),
            praise: JSON.stringify([]),
            text: "君子貌少年心,有骨有相,温文尔雅。",
            fansN: "0",
            attentionN: "0",
            praiseN: "0",
            infor:0,
            privilege:JSON.stringify([false,false,false,false,false])
          }).then((res) => {
            console.log(res);
            if (res.code == 200) {
              alert("注册成功！");
              setActive("fruits");
              setFlag5(false);
              getLogin().then((res) => {
                console.log(res);
                setData(res.data);
              });
            }
          });
        } else {
          setFlag5(true);
        }
      }
    } else {
      alert("未发送验证码");
    }
  };
  //注册发送验证码
  const addcode = () => {
    var code = "" + (parseInt(Math.random() * 1000000) + 1000000);
    code = code.substring(1, 7);
    setZcCode(code);
    setFlag1(true);
  };

  const addcode1 = () => {
    var code = "" + (parseInt(Math.random() * 1000000) + 1000000);
    code = code.substring(1, 7);
    let a = data.filter((item) => item.userName == userName2);
    if (a.length != 0) {
      setZcCode1(code);
      setFlag11(true);
    } else {
      setFlag11(false);
    }
  };

  //验证登录手机号
  const niusernameFn = (e) => {
    setUserName2(e);
    if (e.length >= 11) {
      setFlag12(false);
    }
  };
  const login1 = (e) => {
    let a = data.filter((item) => item.userName == userName2);
    if (userName2.length < 11) {
      setFlag12(true);
    } else {
      setFlag12(false);
    }
    if (a.length != 0) {
      setFlag11(true);
      setFlag13(false);
    } else {
      setFlag11(false);
      setFlag13(true);
    }
    if (zcCode1 == cod) {
      setFlag14(false);
    } else {
      setFlag14(true);
    }
    if (cod.length != 0) {
      if (a.length != 0 && zcCode1 == cod) {
        alert("登录成功");
        localStorage.setItem("user", JSON.stringify(a[0]));
        localStorage.setItem(
          "token",
          "231fa2sd311r5dgfs4g5sd44fd6sh5ga4ds54fd46a5sf4"
        );
        navigate("/my");
      }
    } else {
      alert("未输入验证码");
    }
  };
  //验证登录密码
  const unipasswordFn = (e) => {
    setCod(e);
  };
  const actChang = (e) => {
    setActive(e);
  };
  //跳验证码登录
  const goauth = () => {
    setFlag6(true);
  };
  const goauth1 = () => {
    setFlag6(false);
  };
  useEffect(() => {
    getLogin().then((res) => {
      console.log(res);
      setData(res.data);
    });
  }, []);
  return (
    <>
      <NavBar onBack={back}>登录/注册</NavBar>

      <Tabs activeKey={active} onChange={actChang}>
        <Tabs.Tab title="登录" key="fruits">
          {!flag6 ? (
            <Form layout="horizontal">
              <Form.Item label={<UserOutline />} name="username">
                <Input
                  placeholder="请输入用户名"
                  clearable
                  onChange={usernameFn}
                />
              </Form.Item>
              {flag7 ? (
                <NoticeBar content="用户名长度不能小于11位" color="alert" />
              ) : (
                ""
              )}
              {flag8 ? (
                <NoticeBar content="注册的用户名不存在" color="alert" />
              ) : (
                ""
              )}
              <Form.Item label={<UnlockOutline />} name="password">
                <Input
                  placeholder="请输入密码"
                  clearable
                  type="text"
                  onChange={passwordFn}
                />
              </Form.Item>
              {flag9 ? (
                <NoticeBar content="密码长度至少6位" color="alert" />
              ) : (
                ""
              )}
              {flag10 ? <NoticeBar content="密码错误" color="alert" /> : ""}
              <Button block shape="rounded" size="large" onClick={login}>
                登录
              </Button>
              <div className="TSCyzm">
                <div onClick={goauth}>通过验证码登录</div>
              </div>
            </Form>
          ) : (
            // 验证码登录
            <Form layout="horizontal">
              {flag11 ? (
                <NoticeBar
                  content={"验证码是：" + zcCode1}
                  color="alert"
                  closeable
                />
              ) : (
                ""
              )}
              <Form.Item
                name="verificationcode"
                extra={
                  <div className="extraPart" onClick={addcode1}>
                    <a>发送验证码</a>
                  </div>
                }
              >
                <Input
                  placeholder="请输入手机号"
                  clearable
                  onChange={niusernameFn}
                />
              </Form.Item>
              {flag12 ? (
                <NoticeBar content="手机号长度不能小于11位" color="alert" />
              ) : (
                ""
              )}
              {flag13 ? <NoticeBar content="手机号不对" color="alert" /> : ""}
              <Form.Item label={<UnlockOutline />} name="password">
                <Input
                  placeholder="请输入验证码"
                  clearable
                  type="text"
                  onChange={unipasswordFn}
                />
              </Form.Item>
              {flag14 ? <NoticeBar content="验证码不对" color="alert" /> : ""}
              <Button block shape="rounded" size="large" onClick={login1}>
                登录
              </Button>
              <div className="TSCyzm">
                <div onClick={goauth1}>通过密码登录</div>
              </div>
            </Form>
          )}
        </Tabs.Tab>
        {/* 注册 */}
        <Tabs.Tab title="注册" key="vegetables">
          {/* 验证码提示 */}
          {flag1 ? (
            <NoticeBar
              content={"验证码是：" + zcCode}
              color="alert"
              closeable
            />
          ) : (
            ""
          )}
          {/* 注册用户名 */}
          <Form layout="horizontal">
            <Form.Item label={<UserOutline />} name="username">
              <Input
                placeholder="请输入用户名"
                clearable
                onChange={zcusernameFn}
              />
            </Form.Item>
            {flag3 ? (
              <NoticeBar content="用户名长度不能小于11位" color="alert" />
            ) : (
              ""
            )}
            {flag5 ? (
              <NoticeBar content="注册的用户名已存在" color="alert" />
            ) : (
              ""
            )}
            {/* 注册 验证码*/}
            <Form.Item
              name="verificationcode"
              extra={
                <div className="extraPart" onClick={addcode}>
                  <a>发送验证码</a>
                </div>
              }
            >
              <Input
                placeholder="请输入验证码"
                clearable
                onChange={zcverificationcode}
              />
            </Form.Item>
            {flag2 ? <NoticeBar content="验证码不正确" color="alert" /> : ""}

            {/* 注册密码 */}
            <Form.Item label={<UnlockOutline />} name="password">
              <Input
                placeholder="请输入密码"
                clearable
                type="password"
                onChange={zcpasswordFn}
              />
            </Form.Item>
            {flag4 ? (
              <NoticeBar content="密码长度不能小于6位" color="alert" />
            ) : (
              ""
            )}
            <Button block shape="rounded" size="large" onClick={register}>
              注册
            </Button>
          </Form>
        </Tabs.Tab>
      </Tabs>
    </>
  );
}
